<template>
  <!-- 用户列表 -->
  <div>
    <div style="margin: 20px 0;">
      <el-button type="primary" @click="newlyBuild">新建</el-button>
      <el-button @click="deleteTabel">删除</el-button>
    </div>

    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      v-loading="loading"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column label="序号" width="55" align="center">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column label="日期" width="120" align="center">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120" align="center">
      </el-table-column>
      <el-table-column prop="address" label="地址" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="value" label="状态" align="center">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.value" active-value="1" inactive-value="0" @change="switchChange($event,scope.row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="120">
        <template v-slot="scope">
          <el-button size="mini" type="text" @click="resetPassword(scope.row)">重置密码</el-button>
          <el-button size="mini" type="text" @click="editTable(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <new-edit ref="newEdit" />
    <reset-password ref="resetPassword" />
  </div>
</template>

<script>
import newEdit from '../dialog/new-edit.vue'
import resetPassword from '../dialog/reset-password.vue'

export default {
  name: "UserRights",
  components: { newEdit, resetPassword },
  props: {},
  data() {
    return {
      loading: false,
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          value: '0'
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          value: '0'
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          value: '0'
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          value: '0'
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          value: '1'
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          value: '1'
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          value: '1'
        },
      ],
      multipleSelection: [],
    };
  },
  filters: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    newlyBuild() {
      console.log('新建')
      this.$refs.newEdit.add()
    },
    deleteTabel() {
      console.log(this.multipleSelection, '删除')
    },
    switchChange(e, val) {
      if (e === '1') {
        val.value = '1'
      } else {
        this.$confirm(`禁用后将无法登录平台，是否确认禁用当前用户`, '状态管理', {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          iconClass: "icon-warning",
          customClass: "custom-message-box",
        }).then(async () => {
          val.value = '0'
        }).catch(() => {
          val.value = '1'
        });
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    resetPassword(val) {
      console.log(val)
      this.$refs.resetPassword.add()
    },
    editTable(val) {
      this.$refs.newEdit.edit(val)
    },
  },
};
</script>

<style scoped lang="scss"></style>
